<template>
  <div class="hello">
    <!-- <h1>{{ msg }}</h1> -->
    <h3>姓名：{{ name }}</h3>
    <h3>年龄：{{ age }}</h3>
    <h3>年龄：{{ tel }}</h3>
    <button @click="changeName">点击修改姓名</button>
    <button @click="changeAge">点击修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'; // 如果你需要响应式引用，可以导入 ref  

// 定义响应式引用  
const name = ref('张三'); // 使用 ref 创建响应式引用  
const age = ref(18);
const tel = ref(18689895689);

// 定义方法  
function changeName() {
  name.value = '小麦'; // 使用 .value 访问或修改 ref 的值  
  console.log("名字被改变了");
}

// 如果有其他逻辑或方法，可以继续在这里定义  

</script>

<style scoped></style>
